<!--
 * @Author: xuzehan 123@qq.com
 * @Date: 2023-04-25 09:31:29
 * @LastEditors: xuzehan 123@qq.com
 * @LastEditTime: 2023-07-05 11:10:17
 * @FilePath: \ant-design-vue-jeecg-master\src\views\taskManagement\modules\steps.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="stepsBox">
    <a-modal
      title="流程详情"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div class="stepsBody">
        <div class="steps" v-for="(item, index) in obj" :key="index">
          <div class="desBox">{{ item.label }}</div>
          <div class="item-tail"></div>
        </div>

        <!-- <div class="steps">
          <div class="desBox">处理作战需求1</div>
          <div class="item-tail"></div>
        </div>
        <div class="steps">
          <div class="desBox">完成</div>
          <div class="item-tail"></div>
        </div> -->
      </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      obj: [
        // {label:'开始'},
        // {label:'处理作战需求'},
        // {label:'将星指上行链路变频器频点信息封装成复合链路帧'},
        // {label:'将星指下行链路变频器频点信息封装成复合链路帧'},
        // {label:'将复合链路帧发送到业务及综合管理单元'},
      ],
    }
  },
  methods: {
    showModal(record) {
      this.visible = true
      this.obj = JSON.parse(record)
    },
    handleOk(e) {
      this.confirmLoading = true
      setTimeout(() => {
        this.visible = false
        this.confirmLoading = false
      }, 2000)
    },
    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
    },
  },
}
</script>
<style lang="less" scoped>
.stepsBody {
  display: flex;
  flex-direction: column;
  .steps {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .desBox {
      max-width: 350px;
      text-align: center;
      border: 1px solid rgba(0, 0, 0, 0.65);
      padding: 10px;
      color: #e3e3e3;
    }

    .item-tail {
      width: 2px;
      height: 30px;
      background: rgba(0, 0, 0, 0.65);
      position: relative;
      margin-bottom: 10px;
    }
    .item-tail:after {
      content: '';
      border-top: solid 10px rgba(0, 0, 0, 0.65);
      border-left: solid 10px #00800000;
      border-right: solid 10px #00800000;
      border-bottom: solid 0px #00800000;
      position: absolute;
      left: -9px;
      top: 100%;
    }
    // .steps:last-child {
    //   background: green;
    // }
  }
}
.steps:first-child .desBox {
  border-radius: 10px;
}
.steps:last-child {
  // background: green;
  .item-tail {
    width: 0px;
    height: 0px;
  }
  .item-tail:after {
    content: '';
    border-top: solid 0px rgba(0, 0, 0, 0.65);
    border-left: solid 0px #00800000;
    border-right: solid 0px #00800000;
    border-bottom: solid 0px #00800000;
    position: absolute;
    left: -9px;
    top: 100%;
  }
}
</style>
<style lang="less" scoped>
.ant-steps-vertical .ant-steps-item-icon {
  display: none !important;
}
.ant-steps {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.ant-steps-item-description {
  width: auto;
  display: inline-block;
  padding: 15px;
  border: 1px solid;
  margin: auto;
  margin-bottom: 21px;
}
// .ant-steps-vertical > .ant-steps-item > .ant-steps-item-container > .ant-steps-item-tail::after {
//   content: ' ';
//   display: inline-block;
//   height: 10px;
//   width: 10px;
//   border-width: 2px 2px 0 0;
//   border-color: #c8c8cd;
//   border-style: solid;
//   -webkit-transform: matrix(0.71, 0.71, 0.71, -0.71, 0, 0);
//   // transform: matrix(0.71, 0.71, 0.71, -0.71, 0, 0);
//   transform: matrix(0.71, 0.71, 0.71, -0.71, 0, 0);
//   position: absolute;
//   top: 39%;
//   left: 62%;
//   margin-top: -4px;
// }
.ant-steps-vertical > .ant-steps-item > .ant-steps-item-container > .ant-steps-item-tail {
  height: 58px;
  margin-left: calc(50% - 3px);
  transform: translateX(-50%);
  margin-top: 20px;
}
.ant-steps-item > .ant-steps-item-container > .ant-steps-item-tail::after {
  background: hsla(0, 0%, 0%, 0.65);
}
</style>
